import React from 'react';
import {Router, Route, Link} from 'react-router';

import utils from '../../js/utils';
import config from '../../../config/config';

class Articles extends React.Component {
  constructor () {
    super();

    this.state = {
      router: '/articles',
      nav: ["文章", "图集", "视频", "音频", "词库", "题库"],
      type_title: "",
      list: [],
      size: 0,
      page: 1,
      delete_typeid: 0,
      delete_aid: 0,
      delete_ele: null,

      page_status: true,
    }

    this.deleteArticle = this.deleteArticle.bind(this);
  }

  componentDidMount () {
    let _this = this;
    let typeid = this.props.params.typeid;
    if (typeid) {
      utils.post("/get_column_nav", {typeid}, function (res) {
        console.log(res);
        if (parseInt(res.code) == 200) {
          _this.setState({
            type_title: res.type_title
          })
        }
      })

      utils.post("/get_column_article_list", {typeid, page: this.state.page}, function (res) {
        console.log("articles", res);
        if (parseInt(res.code, 10) == 200) {
          _this.setState({
            list: res.list,
            size: res.size
          })
        }
      })
    }

    $('#submitClose').click(function () {
      _this.setState({
        delete_typeid: 0,
        delete_aid: 0
      })
    })

    $('#submitChange').click(function () {
      if (_this.state.delete_aid == 0 || _this.state.delete_typeid == 0) {
        return;
      }

      utils.post('/delete_article', {aid: _this.state.delete_aid, typeid: _this.state.delete_typeid}, function (res) {
        $('#myModal').modal('hide');
        $('#submitChange').hide();
        if (parseInt(res.code, 10) == 200) {
          _this.setState({
            delete_typeid: 0,
            delete_aid: 0
          })
          $(_this.state.delete_ele).parent('div').parent('td').parent('tr').remove();
        }
      })
    })
  }

  data_prev () {
    let page = this.state.page -1 <= 0 ? 0 : this.state.page -1;
    this.setState({
      page: page
    })
    let _this = this;

    let typeid = this.props.params.typeid;
    if (typeid) {
      utils.post("/get_column_article_list", {typeid, page: page}, function (res) {
        console.log("articles", res);
        if (parseInt(res.code, 10) == 200) {
          _this.setState({
            list: res.list,
            size: res.size
          })
        }
      })
    }
  }

  data_next () {
    let page = (this.state.page + 1 >= Math.ceil(this.state.size / 30) ? Math.ceil(this.state.size / 30) : (this.state.page + 1));
    this.setState({
      page: page
    })
    let _this = this;
    let typeid = this.props.params.typeid;
    if (typeid) {
      utils.post("/get_column_article_list", {typeid, page: page}, function (res) {
        console.log("articles", res);
        if (parseInt(res.code, 10) == 200) {
          _this.setState({
            list: res.list,
            size: res.size
          })
        }
      })
    }
  }

  deleteArticle (event) {

    let ele = event.target || event.srcElement;
    let typeid = ele.getAttribute('data-typeid');
    let aid = ele.getAttribute('data-aid');
    let title = ele.getAttribute('data-title');

    this.setState({
      delete_typeid: typeid,
      delete_aid: aid,
      delete_ele: ele
    })

    $('.modal-body').text("确定删除文档：" + title + "?");
    $('#myModal').modal('show');
    $('#submitChange').show();
  }

  searchArticle () {

    let title = this.refs.article_title.value.trim();
    let typeid = this.props.params.typeid;
    let page = 1;

    if (!utils.checkValue(title)) {
      $('.modal-body').text("请输入需要查找的作品编号/作品名称");
      $('#myModal').modal('show');
      return
    }

    let _this = this;

    utils.post('/search_article_from_title', {title, typeid, page}, function (res) {

      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
        return
      }

      $('.modal-body').text(res.errmsg);
      $('#myModal').modal('show');
    })
  }

  render () {

    let channel = this.props.params.id;
    let typeid = this.props.params.typeid;
    let deleteArticle = this.deleteArticle;
    return (
      <div>
        <div className='bamboo-nav'>当前位置：内容管理 > {this.state.type_title} > {this.state.nav[this.props.params.id]}列表</div>
        <div className='bamboo-content' style={{minHeight: (window.innerHeight - 75 - 65) + 'px'}}>
          <div className="bamboo-articles-header">
            <div>
              <input type="text" className="form-control" ref="article_title" placeholder="请输入需要查找的作品编号/作品名称"/><a onClick={this.searchArticle.bind(this)} href="javascript:void(0)" className="bamboo-btn-green">查找</a><span>（共计{this.state.size}篇文档）</span>
            </div>
            {/* <Link to={"/content/articles/new/" + this.props.params.id + "/" + this.props.params.typeid} className="bamboo-btn-green">新建文档</Link> */}
          </div>
          <div className="bamboo-articles-list">
            <table className='bamboo-table'>
              <thead>
                <tr>
                  <th>作品编号</th>
                  <th>设计师姓名</th>
                  <th>作品名称</th>
                  <th>作品类型</th>
                  <th>电话</th>
                  <th>上传时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {
                  this.state.list.map(function (item, idx) {
                    return <tr key={idx}>
                      <td style={{width: "8rem"}}>{item.pid}</td>
                      <td style={{width: "20rem"}}>{item.shop_name}</td>
                      <td style={{width: "20rem"}}>
                        {item.project_name}
                      </td>
                      <td style={{width: "10rem"}}>{item.project_type}</td>
                      <td style={{width: "5rem"}}>{item.shop_contact_phone}</td>
                      <td style={{width: "10rem"}}>{item.created_at.split(".")[0].replace("T", " ")}</td>
                      <td>
                        <a href={"http://www.xinxingtianxia.cn/product-details.html?pid=" + item.pid} target="_black">预览</a>
                      </td>
                    </tr>
                  })
                }
              </tbody>
            </table>
            <div className='xlb-data-page' style={{display: this.state.page_status ? "block" : "none"}}>
              <div style={{display: 'inline-block'}}>
                <a onClick={this.data_prev.bind(this)} className="btn btn-success">上一页</a>
                <a onClick={this.data_next.bind(this)} className="btn btn-warning">下一页</a>
              </div>
              <span>当前第<span>{this.state.page}</span>页</span>
              <span>共<span>{Math.ceil(this.state.size / 30)}</span>页</span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Articles;
